﻿/**
 *    Copyright 2006 - 2011 Opera Software ASA
 *
 *    Licensed under the Apache License, Version 2.0 (the "License");
 *    you may not use this file except in compliance with the License.
 *    You may obtain a copy of the License at
 *
 *        http://www.apache.org/licenses/LICENSE-2.0
 *
 *    Unless required by applicable law or agreed to in writing, software
 *    distributed under the License is distributed on an "AS IS" BASIS,
 *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *    See the License for the specific language governing permissions and
 *    limitations under the License.
 *
 **/


.color-picker-popup svg
{
  display: block;
}
.color-picker-popup
{
  position: relative;
  width: 374px;
  height: 222px;
}

/* Color picker boxes */
.color-picker-2-d-graphic,
.color-picker-1-d-graphic,
.color-picker-color-old,
.color-picker-color,
.color-picker-alpha
{
  border: 1px solid #333;
  box-shadow:0 -1px 1px rgba(255,255,255,0.1),  0 1px rgba(0,0,0,0.2);
}

.color-picker-2-d-graphic
{
  position: absolute;
  left: 10px;
  top: 10px;
  width: 200px;
  height: 200px;
}

.height-100
{
  height: 100%;
}

.color-picker-1-d-graphic
{
  position: absolute;
  left: 227px;
  top: 10px;
  width: 20px;
  height: 200px;
}
.color-picker-color-old,
.color-picker-color
{
  position: absolute;
  left: 264px;
  top: 10px;
  width: 50px;
  height: 36px;
  margin: 0;
}
.color-picker-color-old div,
.color-picker-color div
{
  border-width: 18px 25px;
  border-style: solid;
  border-color: black transparent transparent black;
}
.color-picker-color-old
{
  border-right-width: 0;
}
.color-picker-color
{
  left: 315px;
  border-left-width: 0;
}

.color-picker-inputs
{
  position: absolute;
  left: 259px;
  top: 58px;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}

.color-picker-inputs td
{
  padding: 0px 2px;
  text-align: left;
}
.color-picker-inputs td:first-child
{
  text-align: right;
}

.color-picker-spacer
{
  height: 10px;
}
.color-picker-number
{
  width: 40px;
  margin: 0 0 1px 0;
  padding: 1px 1px 0 1px;
}

.color-picker-text
{
  width: 50px;
  margin: 0;
  padding: 1px 1px 0 1px;
}

.color-picker-slider-base
{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.color-picker-slider
{
  width: 40px;
  height: 10px;
  position: absolute;
  margin-left: -10px;
  margin-top: -5px;
  left: 0px;
  top: 0px;
}
.color-picker-pointer
{
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  /* to prevent painting artefacts on moving the pointer */
  border: 1px solid transparent;
}
.color-picker-target-element
{
  position: relative;
}
.color-picker-target-element key,
.color-picker-target-element value
{
  position: relative;
  z-index: 3;
}

.black-50
{
  position: absolute;
  z-index: 1;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .3);
}
.color-picker-popup.alpha
{
  width: 521px;
}
.color-picker-alpha
{
  position: absolute;
  left: 380px;
  top: 10px;
  width: 20px;
  height: 200px;
}
.color-picker-input-alpha
{
  position: absolute;
  left: 415px;
  top: 192px;
  width: 12em;
}
.color-picker-number.alpha
{
  width: 4.4em;
}
.color-sample-alpha-bg
{
  position: absolute;
  left: 265px;
  top: 11px;
}

.color-picker-palette
{
  position: absolute;
  left: 10px;
  top: 220px;
}

.color-picker-palette-item
{
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0 3px;
  border: 1px solid #333;
}
